<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Ajax File Uploader</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />   
    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.form.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.MultiFile.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.blockUI.js"></script>
    
    <script type="text/javascript">
      $(function(){
        
        //Validation could be added with the form validation plugin
        /*
          $("#submit1").click(function(event){
            console.log($("#fileUpload1").val());
           // $('#iframe1').contents().find('#fileUpload2')[0].val($("#fileUpload1").val());
            event.preventDefault();
          });
          */

          $('#form1').ajaxForm(
          {
            url : "services/processFileUpload.php",
            type : "POST", //This should be set on the form element
            beforeSubmit:  function(arr, $form, options) {
              // The array of form data takes the following form: 
              // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]      
              // return false to cancel submit                
              $('#logDetails').append('<li>This function was triggerred before the form was submitted</li>');
              //This has to do with the extra empty element that is added with the multiform plugin
              $.fn.MultiFile.disableEmpty(); // before submiting the form
              $.blockUI({ message: '<h1>Just a moment...</h1>' });
            },
            data : {value1 : "Additional Data that was passed"},
            dataType : 'json',
            success : function(response, statusText, xhr, elem) {/*
              1.) responseText or responseXML value (depending on the value of the dataType option).
              2.) statusText
              3.) xhr (or the jQuery-wrapped form element if using jQuery < 1.4)
              4.) jQuery-wrapped form element (or undefined if using jQuery < 1.4)
              */
              $.fn.MultiFile.reEnableEmpty();  // after submiting the form
              $('input:file').MultiFile('reset'); //reset control
              //$('input:file').MultiFile('reset') //To reset file selections

              //Logging the result
              $('#logDetails').append('<li>This is the result of the form submission : </li>' + JSON.stringify(response));
              //showing the images that were uploaded
              if($.isArray(response) && response.length>0) {
                $.each(response, function(index, value){
                  if (value.result) {
                    $('#logDetails').append("<img src='"+value.file_path+"'/><br/>");
                  }
                });
              }
              $.unblockUI();
            },
            error : function (response) {
              //standard ajax error
              $('#logDetails').append('<li>An error occurred when the form was submitted</li>');
              $.unblockUI();
            },
            resetForm : true,
            clearForm : true,
            iframe : true
          }
        );

          $("#showLog").toggle(function(){$(this).text("Show Log"); $("#logDetails").hide(); return false;}, function(){$(this).text("Hide Log");$("#logDetails").show(); return false;})
          $("#clearLog").click(function(){$("#logDetails").html(""); return false;});

          $("#fileUpload1").MultiFile(
            {
              list : "#fileList",
              max: 5,
              accept: 'gif|jpg|png|bmp',
              STRING: {
                remove:'x Remove',
                selected:'Selected file: $file',
                denied:'Files of type $ext are not allowed!'                
                //duplicate : 'You already selected that file dumbo!\n$file'
             },
             //events
              onFileRemove: function(element, value, master_element){
              $('#logDetails').append('<li>onFileRemove - '+value+'</li>');
              },
              afterFileRemove: function(element, value, master_element){
              $('#logDetails').append('<li>afterFileRemove - '+value+'</li>');
              },
              onFileAppend: function(element, value, master_element){
              $('#logDetails').append('<li>onFileAppend - '+value+'</li>');
              },
              afterFileAppend: function(element, value, master_element){
              $('#logDetails').append('<li>afterFileAppend - '+value+'</li>');
              },
              onFileSelect: function(element, value, master_element){
              $('#logDetails').append('<li>onFileSelect - '+value+'</li>');
              },
              afterFileSelect: function(element, value, master_element){
              $('#logDetails').append('<li>afterFileSelect - '+value+'</li>');
              }
            });
      });
    </script>

    <style type="text/css">
      #fileList {
        padding: 5px;
        border: 1px solid #ccc;
        -moz-box-shadow: 5px 5px 5px #888;
        -webkit-box-shadow: 5px 5px 5px #888;
        box-shadow: 5px 5px 5px #888;
        margin-bottom:10px;
        margin-top:10px;
      }
    </style>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "ajaxFileUploader";
  ?>

  <body>

    <!-- Container -->
    <div id="container">

      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>

      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Ajax File Uploader</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content">

          <div class="sectionLeft">
            <form id="form1" action="#" method="post" enctype="multipart/form-data">
              <h1>Ajax File Uploader</h1>
              <label for="fileUpload1"> Select a file for upload
              <input id="fileUpload1" name="fileUpload1[]" type="file"/>
              </label>
              <button id="submit1" name="submit1" >Submit</button>
            </form>

            <div id="fileList">
              <p>Files that you have selected :</p>
            </div>
            <div id="log"><p>Event Log: <a id="showLog" href="#">Hide Log</a> &nbsp;&nbsp; <a id="clearLog" href="#">Clear Log</a> </p><div id="logDetails"></div></div>

          </div>


        <div id="domMessage" style="display:none;">
            <h1>We are processing your request.  Please be patient.</h1>
        </div>

          <!--   end #section-->

        <!-- Right Navigation -->
        <div id="sidebar">
          <?php include('includes/rightNavSamples.php') ?>
        </div>
        <!-- end Right Navigation -->


        </div>
        <!-- end #content -->

      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>

